<template>
  <div class="main-content">

    <div class="scalable-container" :style="{ transform: `scale(${scale})`, transformOrigin: 'top' }">
      <!-- 页面内容 -->
      <div class="content">
        <el-card style="width: 50%; margin: 30px auto">
          <el-form :model="user" label-width="80px" style="padding-right: 20px">
            <div style="margin: 15px; text-align: center">
              <el-form-item prop="avatar">
                <el-upload
                    name="file"
                    class="avatar-uploader"
                    action="http://zjdownload.xyhelp.cn/prod-api/common/upload"
                    :headers="{ Authorization: `Bearer ${token}` }"
                    :show-file-list="false"
                    list-type="picture"
                    :on-success="handleAvatarSuccess"
                >
                  <img v-if="user.avatar" :src="user.avatar" class="avatar"/>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
            <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="user.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <div style="text-align: center; margin-bottom: 20px">
              <el-button type="primary" @click="update">保 存</el-button>
            </div>
          </el-form>
        </el-card>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem('userInfo')),
      token: localStorage.getItem('token'),
      scale: 1,
    }
  },
  mounted() {
    // 监听滚轮事件
    window.addEventListener('wheel', this.handleWheelEvent);
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('wheel', this.handleWheelEvent);
  },
  beforeRouteEnter(to, from, next) {
    // 判断是否从特定页面跳转过来
    if (from.name === 'Search') {
      next(vm => {
        // 在组件实例创建后刷新页面
        window.location.reload();
      });
    } else {
      next();
    }
  },
  methods: {
    update() {
      // 保存当前的用户信息到数据库
      this.$request.post('/apis/user/update', this.user).then(res => {
        // 成功更新
        this.$message.success('保存成功')
        // 更新浏览器缓存里的用户信息
        localStorage.setItem('userInfo', JSON.stringify(this.user))
        // 触发父级的数据更新
        this.$emit('update:user')
        window.location.reload()
      })
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response.code == '200') {
        // 把user的头像属性换成上传的图片的链接
        this.$set(this.user, 'avatar', response.url)
      } else {
        this.$message.error(response.msg)  // 弹出错误的信息
      }
    },
    handleWheelEvent(event) {
      // 检查是否按下了Ctrl键
      if (event.ctrlKey) {
        // 防止页面的默认缩放行为
        //event.preventDefault();

        // 判断滚轮方向
        if (event.deltaY < 0) {
          // 滚轮向上滚动，放大页面
          this.scale = Math.min(this.scale + 0.1, 2);  // 最大放大到2倍
        } else {
          // 滚轮向下滚动，缩小页面
          this.scale = Math.max(this.scale - 0.1, 0.5);  // 最小缩小到0.5倍
        }
      }
    },
  }
}
</script>

<style scoped>
/deep/ .el-form-item__label {
  font-weight: bold;
}

/deep/ .el-upload {
  border-radius: 50%;
}

/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border-radius: 50%;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}
</style>